<template>
  <div class="category-list mar-t-20 mar-b-20">
    <div v-for="(item, index) in categoryList" :key="index" class="flex v-align-c">
      <div class="flex flex-center height-46 width-100"><span>{{ item.categoryName }}</span></div>
      <ul class="flex flex-wrap">
        <li
          v-for="(itemSub, indexSub) in item.children"
          :key="indexSub"
          :class="itemSub.show ? 'actived' : ''"
          @click="categorySelect(index, indexSub)"
        >{{ itemSub.categoryName }}</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { getSupplierCategoryList } from '@/api/shop/shop'
export default defineComponent({
  name: 'CategorySliderList',
  props: {
    categoryId: {
      type: String
    }
  },
  setup(props, context) {
    const categoryList = ref([{
      categoryName: '供应商分类：',
      children: []
    }])
    onMounted(() => {
      // 初始化获取供应商分类数据
        initSupplierCategoryTree()
    })

    const categorySelect = (index:number, indexSub:number) => {

      const currentShow = categoryList.value[index].children[indexSub].show
      categoryList.value[0].children.forEach((item:any) => {
          item.show = false
      })
      if (!currentShow) {
        categoryList.value[index].children[indexSub].show = true
      }
      let categoryName = '店铺列表'
      if (categoryList.value[index].children[indexSub].categoryName !== '全部') {
        categoryName = categoryList.value[index].children[indexSub].categoryName
      }
      context.emit("handSearch", categoryList.value[index].children[indexSub].show,categoryList.value[index].children[indexSub].categoryId,categoryName)
    }

    const initSupplierCategoryTree = () => {
        getSupplierCategoryList().then(response => {
          categoryList.value[0].children.push.apply(categoryList.value[0].children, response.data)
          categoryList.value[0].children.unshift({ categoryName: '全部' })
          categoryList.value[0].children[0].show = true
        })
      }

    return {
      categoryList,
      categorySelect
    }
  }
})
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  .category-list{
    background: #f9f9f9;
    >div{
      border-bottom: #f5f5f5 1px solid;
      &:last-child{
        border-bottom: none;
      }
      >div{
        color: #666;
      }
      ul{
        padding-left: 30px;
        padding-top: 12px;
        width: 1322px;
        background: #fff;
        li{
          color: #666;
          padding: 0 7px;
          height: 22px;
          line-height: 22px;
          margin-right: 22px;
          margin-bottom: 12px;
          cursor: pointer;
          &.actived{
            background: $darkBlue;
            color: #fff;
          }
        }
      }
    }
  }
</style>
